﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Todo</title>
    <!--<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
          integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY"
          crossorigin="anonymous">-->
    <link type="text/css" rel="stylesheet" href="lib/pure-v1.0.1/pure.css" />
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="pure-g">
        <div class="pure-u-1">
            <p style="background-color:#cbcbcb;height:60px;line-height:60px;border-radius:10px;padding-left:20px;">
                <a href="/api-docs" target="_blank">访问api docs</a>
                <a href="v2019121/index.html">访问v2019121 版本界面</a>
            </p>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-1">
            <h1>My Todo （<span id="counter"></span>）</h1>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-1" style="position: fixed;right: 40px;top: 120px;width: 500px;">
            <div id="add-box">
                <h1>添加待办事项</h1>
                <form class="pure-form pure-form-aligned" action="javascript:void(0);" method="POST" onsubmit="addItem()">
                    <div class="pure-control-group">
                        <label for="add-name">待办事项名称</label>
                        <input type="text" id="add-name" placeholder="待办事项名称">
                    </div>
                    <div class="pure-control-group">
                        <label for="add-details">待办事项详情</label>
                        <textarea id="add-details" placeholder="待办事项详情"></textarea>
                    </div>
                    <div class="pure-controls">
                        <input type="submit" class="pure-button pure-button-primary" value="添加">
                    </div>
                </form>
            </div>
            <div id="edit-box" style="display:none;">
                <h1>编辑待办事项 <a onclick="closeEditBox()" aria-label="Close" class="close">&#10006;</a> </h1>
                <form class="pure-form pure-form-aligned" action="javascript:void(0);" method="POST" onsubmit="editItem()">
                    <input type="hidden" id="edit-id">
                    <div class="pure-control-group">
                        <label for="edit-name">待办事项名称</label>
                        <input type="text" id="edit-name" placeholder="待办事项名称">
                    </div>
                    <div class="pure-control-group">
                        <label for="edit-details">待办事项详情</label>
                        <textarea id="edit-details" placeholder="待办事项详情"></textarea>
                    </div>
                    <div class="pure-controls">
                        <label for="edit-is-complete" class="pure-checkbox">
                            <input type="checkbox" id="edit-is-complete">
                            <span>是否完成</span>
                        </label>
                    </div>
                    <div class="pure-controls">
                        <input type="submit" class="pure-button pure-button-primary" value="提交">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-1">
            <table class="pure-table pure-table-bordered pure-table-striped">
                <thead>
                    <tr>
                        <th>是否完成</th>
                        <!--<th>ID</th>-->
                        <th>名称</th>
                        <th>详情</th>
                        <th>创建时间</th>
                        <th>完成时间</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody id="todos"></tbody>
            </table>
        </div>
    </div>
    <!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>-->
    <script src="lib/jquery-v3.0.0/jquery.js"></script>
    <script src="site.js"></script>
</body>
</html>